DOM 基礎入門（Step by Step）
本章會帶你一步一步了解 DOM 基礎概念 與 基本操作。
開發者工具：Windows/Linux 按 F12；Mac 按 ⌥⌘I。
✅ 建議教學方式：每學完一個概念，就打開對應的練習做一下，看看實際效果。
0）練習文件列表
答案版：
✅ final.html - 完整解答
✅ final.html - 完整解答
1）什麼是 DOM？
DOM = Document Object Model（文檔對象模型）
DOM 是 JavaScript 與網頁交互的橋樑。當瀏覽器加載 HTML 頁面時，會將 HTML 結構轉換成一個樹形對象結構，我們稱之為「DOM 樹」。通過 JavaScript，我們可以：
- 選擇頁面上的元素
- 讀取元素的屬性和內容
- 修改元素的屬性和內容
- 添加或刪除元素
- 響應用戶事件（點擊、輸入等）
HTML:
<h1 id="title">Hello World</h1>
JavaScript:
const elem = document.getElementById("title");
elem.textContent = "Modified text"; // 改變文本
elem.style.color = "red"; // 改變樣式
✅ 簡單理解：
• HTML 是頁面的骨架
• CSS 是頁面的外觀
• JavaScript (DOM) 是頁面的動作與交互
• HTML 是頁面的骨架
• CSS 是頁面的外觀
• JavaScript (DOM) 是頁面的動作與交互
2）DOM 樹結構
要做什麼：了解 HTML 如何被轉換成 DOM 樹。
2.1 HTML 到 DOM 樹的映射
HTML:
<html>
<body>
<h1 id="title">Hello</h1>
<p class="msg">Message</p>
</body>
</html>
DOM 樹結構：
html
|
body
/ \
h1 p
(id="title") (class="msg")
2.2 節點類型
- 元素節點：如 <div>、<p>、<h1> 等
- 文本節點：元素內的文本內容
- 屬性節點：元素的屬性（id、class、data-* 等）
- 註釋節點：HTML 註釋
✅ 重要提示：
• DOM 是動態的——當你用 JavaScript 修改 DOM 時，頁面會即時更新
• DOM 不會改變原 HTML 文件，只影響瀏覽器中的解析結果
• 刷新頁面後，所有 JavaScript 修改的 DOM 都會重置
• DOM 是動態的——當你用 JavaScript 修改 DOM 時，頁面會即時更新
• DOM 不會改變原 HTML 文件，只影響瀏覽器中的解析結果
• 刷新頁面後，所有 JavaScript 修改的 DOM 都會重置
3）獲取 DOM 元素的方法
要做什麼：學會用 JavaScript 選擇頁面元素。
3.1 按 ID 選擇
HTML:
<h1 id="title">Hello</h1>
JavaScript:
const elem = document.getElementById("title");
console.log(elem); // <h1 id="title">Hello</h1>
3.2 按 Class 選擇
HTML:
<p class="msg">Message 1</p>
<p class="msg">Message 2</p>
JavaScript:
const elems = document.getElementsByClassName("msg");
console.log(elems.length); // 2
console.log(elems[0]); // 第一個元素
3.3 按標籤名選擇
HTML:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
JavaScript:
const elems = document.getElementsByTagName("p");
for (let i = 0; i < elems.length; i++) {
console.log(elems[i].textContent);
}
3.4 按屬性選擇（推薦方法）
HTML:
<input id="first" type="number" value="5" />
<input type="checkbox" name="nums" value="1" />
JavaScript:
// 按 id 選擇
const first = document.querySelector("#first");
// 按 class 選擇
const highlighted = document.querySelector(".highlight");
// 按屬性選擇
const checkboxes = document.querySelectorAll("input[type='checkbox']");
// 按 name 屬性選擇
const nums = document.getElementsByName("nums");
✅ 方法對比：
•
•
•
•
•
getElementById()：只能按 ID，返回單個元素•
getElementsByClassName()：返回「活的」HTMLCollection•
querySelector()：支持所有 CSS 選擇器，推薦使用•
querySelectorAll()：返回 NodeList，支持 forEach
4）讀取元素的屬性與內容
要做什麼：學會讀取和修改元素的信息。
4.1 讀取輸入框的值
HTML:
<input id="first" type="number" value="5" />
JavaScript:
const elem = document.getElementById("first");
// 讀取值
const value = elem.value;
console.log(value); // "5"（注意：值是字符串！）
// 修改值
elem.value = "10";
❗ 重要提醒：
輸入框的
進行數學運算時必須轉換：
輸入框的
value 總是字符串，即使是 type="number"。進行數學運算時必須轉換：
Number(value) 或 parseInt(value)
4.2 讀取元素的文本內容
HTML:
<p id="msg">Hello World</p>
JavaScript:
const elem = document.getElementById("msg");
// 讀取文本
console.log(elem.textContent); // "Hello World"
// 修改文本
elem.textContent = "New text";
4.3 讀取 HTML 內容
HTML:
<div id="box"><b>Bold text</b></div>
JavaScript:
const elem = document.getElementById("box");
// 讀取 HTML
console.log(elem.innerHTML); // "<b>Bold text</b>"
// 修改 HTML（小心 XSS！）
elem.innerHTML = "<i>Italic text</i>";
4.4 讀取 Checkbox 的選中狀態
HTML:
<input id="agree" type="checkbox" />
JavaScript:
const elem = document.getElementById("agree");
// 讀取選中狀態
if (elem.checked) {
console.log("Checkbox is checked");
}
// 修改選中狀態
elem.checked = true;
✅ 常用屬性速查：
•
•
•
•
•
•
elem.value：輸入框、選擇框的值•
elem.textContent：元素的文本內容•
elem.innerHTML：元素的 HTML 內容（危險！）•
elem.checked：checkbox / radio 的選中狀態•
elem.id、elem.className：元素的 id 和 class
5）實踐：表單數據讀取
目標：學會讀取表單元素的值並進行計算。
5.1 HTML 結構
<label for="first">First Number:</label>
<input id="first" type="number" value="5" />
<label for="second">Second Number:</label>
<input id="second" type="number" value="10" />
<button onclick="calculate()">Calculate</button>
5.2 JavaScript 代碼
function calculate() {
// 步驟 1：獲取元素
const firstElem = document.getElementById("first");
const secondElem = document.getElementById("second");
// 步驟 2：讀取值（注意是字符串）
const a = firstElem.value;
const b = secondElem.value;
// 步驟 3：轉換為數字並計算
const sum = Number(a) + Number(b);
// 步驟 4：顯示結果
console.log(`${a} + ${b} = ${sum}`);
}
✅ 驗收標準：
• 點擊「Calculate」按鈕時，Console 顯示計算結果
• 修改輸入框的值後重新計算，結果正確更新
• 點擊「Calculate」按鈕時，Console 顯示計算結果
• 修改輸入框的值後重新計算，結果正確更新
6）實踐：多選框（Checkbox）處理
目標：學會處理多個 checkbox 並收集選中的值。
6.1 HTML 結構
<label><input type="checkbox" name="nums" value="1" /> 1</label>
<label><input type="checkbox" name="nums" value="2" /> 2</label>
<label><input type="checkbox" name="nums" value="3" /> 3</label>
<label><input type="checkbox" name="nums" value="4" /> 4</label>
<label><input type="checkbox" name="nums" value="5" /> 5</label>
<button onclick="submitCheckbox()">Submit checkbox</button>
6.2 JavaScript 代碼
function submitCheckbox() {
// 步驟 1：按 name 屬性獲取所有 checkbox
const checkboxes = document.getElementsByName("nums");
// 步驟 2：遍歷並收集選中的值
const picked = [];
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
picked.push(Number(checkboxes[i].value));
}
}
// 步驟 3：顯示結果
console.log(picked); // 例如：[2, 4, 5]
}
✅ 驗收標準：
• 勾選某些 checkbox，點擊「Submit」按鈕
• Console 顯示一個數組，包含所有勾選的值
• 例如勾選 2、4、5 時，輸出 [2, 4, 5]
• 勾選某些 checkbox，點擊「Submit」按鈕
• Console 顯示一個數組，包含所有勾選的值
• 例如勾選 2、4、5 時，輸出 [2, 4, 5]
7）修改元素的樣式
要做什麼：學會用 JavaScript 改變元素的外觀。
7.1 修改內聯樣式
HTML:
<p id="msg">Hello</p>
JavaScript:
const elem = document.getElementById("msg");
// 修改樣式
elem.style.color = "red";
elem.style.fontSize = "20px";
elem.style.backgroundColor = "yellow";
// 注意：CSS 的連字符變成駝峰式
// background-color → backgroundColor
// font-size → fontSize
7.2 修改 CSS 類名（推薦方法）
HTML:
<style>
.highlight { color: red; font-weight: bold; }
</style>
<p id="msg">Hello</p>
JavaScript:
const elem = document.getElementById("msg");
// 添加類名
elem.classList.add("highlight");
// 移除類名
elem.classList.remove("highlight");
// 切換類名
elem.classList.toggle("highlight");
// 檢查是否有該類
if (elem.classList.contains("highlight")) {
console.log("Has highlight");
}
✅ 推薦做法：
使用
• 樣式邏輯集中在 CSS 文件中
• 更易於維護和修改
• 支持多個樣式的組合（類名）
使用
classList 而不是直接修改 style，原因：• 樣式邏輯集中在 CSS 文件中
• 更易於維護和修改
• 支持多個樣式的組合（類名）
8）常見的 DOM 操作陷阱
要做什麼：了解初學者常犯的錯誤。
8.1 選擇器錯誤
// ❌ 錯誤：忘記 # 前綴
const elem = document.querySelector("myId");
// ✅ 正確：使用 # 表示 ID
const elem = document.querySelector("#myId");
// ❌ 錯誤：忘記 . 前綴
const elem = document.querySelector("myClass");
// ✅ 正確：使用 . 表示 class
const elem = document.querySelector(".myClass");
8.2 字符串與數字混淆
// ❌ 錯誤：直接使用 value（是字符串）
const num = document.getElementById("input").value;
const result = num + 5; // "55" 而不是 60！
// ✅ 正確：轉換為數字
const num = Number(document.getElementById("input").value);
const result = num + 5; // 60
8.3 時機錯誤
// ❌ 錯誤：HTML 還未加載就執行 JavaScript
<script>
document.getElementById("myId").textContent = "test"; // 找不到元素！
</script>
<div id="myId"></div>
// ✅ 正確：HTML 加載後再執行
<div id="myId"></div>
<script>
document.getElementById("myId").textContent = "test";
</script>
❗ 重要提醒：
• 確保 JavaScript 執行時，相應的 HTML 元素已加載
• 優先將 <script> 放在 <body> 的最底部
• 或者使用
• 確保 JavaScript 執行時，相應的 HTML 元素已加載
• 優先將 <script> 放在 <body> 的最底部
• 或者使用
DOMContentLoaded 事件
9）CSS 選擇器速查
要做什麼：掌握常用的 CSS 選擇器語法。
// 按 ID（唯一）
document.querySelector("#myId")
// 按 Class
document.querySelector(".myClass")
// 按標籤名
document.querySelector("div")
document.querySelector("p")
// 按屬性
document.querySelector("input[type='text']")
document.querySelector("[data-name='John']")
// 組合選擇器
document.querySelector("#container .item") // 後代選擇
document.querySelector("#container > .item") // 直接子元素
// 選擇多個
document.querySelectorAll(".item")
document.querySelectorAll("p, span") // 多個選擇器
✅ 快速記憶：
• # = ID
• . = Class
• [...] = 屬性
• 無前綴 = 標籤名
• # = ID
• . = Class
• [...] = 屬性
• 無前綴 = 標籤名
10）最終檢查清單
要做什麼：確保你已掌握 DOM 基礎。
✅ 知識點檢查：
1) ✓ 理解什麼是 DOM
2) ✓ 了解 DOM 樹的結構
3) ✓ 能使用 querySelector 選擇元素
4) ✓ 能讀取輸入框的值（value）
5) ✓ 能讀取文本內容（textContent）
6) ✓ 能處理 checkbox 的選中狀態（checked）
7) ✓ 能修改元素的樣式
8) ✓ 理解字符串與數字的轉換
9) ✓ 能遍歷多個元素（for 迴圈或 forEach）
10) ✓ 完成了表單和 checkbox 的實踐練習
1) ✓ 理解什麼是 DOM
2) ✓ 了解 DOM 樹的結構
3) ✓ 能使用 querySelector 選擇元素
4) ✓ 能讀取輸入框的值（value）
5) ✓ 能讀取文本內容（textContent）
6) ✓ 能處理 checkbox 的選中狀態（checked）
7) ✓ 能修改元素的樣式
8) ✓ 理解字符串與數字的轉換
9) ✓ 能遍歷多個元素（for 迴圈或 forEach）
10) ✓ 完成了表單和 checkbox 的實踐練習
12）後續學習路線
要做什麼：了解接下來要學什麼。
進階 DOM 操作（DOM-2 ~ DOM-5）
- DOM-2：元素選擇與遍歷（parentNode、firstChild、nextSibling 等）
- DOM-3：實踐應用（清單操作、遊戲應用）
- DOM-4：節點操作（創建、刪除、插入元素）
- DOM-5：事件處理（click、mousemove 等用戶交互）
學習建議
- 每個知識點都有對應的練習——邊學邊做
- 遇到錯誤時，打開 DevTools Console 查看具體錯誤信息
- 參考 完成版理解解題思路，再自己重新實現一遍
- 多做實踐練習，培養「看 HTML → 想 DOM 操作」的習慣
✅ 一句總結：DOM 是 JavaScript 與網頁交互的核心——掌握 DOM 基礎，你就能創建動態、交互式的網頁，這是現代前端開發的必備技能。
Final 示範頁
下面集中列出適合公開查看的成果頁與示範頁。
`for-edit` 資料夾中的頁面只作編輯用途，主頁不提供公開入口；需要修改教材時再進入相關資料夾使用。